<template>
  <div class="tmbox">
    <!-- 题目主体 -->
    <div
      class="choicebox"
      v-show="step == item.id"
      v-for="item in qustion"
      :key="item.id"
    >
      <!-- 题目进度 -->
      <div class="tmbtbg">
        <span class="tmbtimg"
          >答题进度：{{ item.id }}/{{ qustion.length }}</span
        >
        <img src="@/images/tmbtbg.png" alt="" />
      </div>
      <div>
        <span>{{ item.id }}. ({{ item.name }}){{ item.question }}</span>
      </div>
      <!-- 题目选项 -->
      <el-checkbox-group
        v-model="checkList"
        @change="statusChange(item)"
        :disabled="elcheckjy"
      >
        <div class="">
          <el-checkbox
            v-for="items in item.options"
            :key="items.id"
            :label="items.id"
            ><div class="">
              <div class="tmoption">{{ items.name }}</div>
            </div>
          </el-checkbox>
        </div>
      </el-checkbox-group>
      <!-- 是否正确提示 -->
      <div class="corr" v-show="right">回答正确</div>
      <div class="corr corrs" v-show="erro && item.name == '连线题'">
        正确答案
      </div>
      <div class="corers" v-show="erro && item.name != '连线题'">
        回答错误，正确答案{{ answer }}
      </div>
      <div class="corer corers" v-show="erro && item.name == '连线题'">
        回答错误
      </div>
      <!-- 题目解析 -->
      <div class="tmjx" v-show="tmjxshow">
        <img
          src="@/images/closeck.png"
          alt=""
          class="tmjxclose"
          @click="tmjxshow = false"
        />
        <span>题目解析：</span>
        <div class="beautifulScroll tmjxdes">{{ item.des }}</div>
      </div>
      <!-- 上一步 -->
      <div class="tool pretool" @click="preornex('1')" v-show="step != 1">
        <img src="@/images/pre.png" alt="" class="active" />
        <img src="@/images/preac.png" alt="" class="normal" />
      </div>
      <!-- 下一步 -->
      <div
        class="nextool tool"
        @click="preornex('2')"
        v-show="step != qustion.length"
      >
        <img src="@/images/nex.png" alt="" class="active" />
        <img src="@/images/nexac.png" alt="" class="normal" />
      </div>
      <!-- 下一步判断 -->
      <div class="tmb">
        <!-- 查看解析 确定 -->
        <div class="ckbox">
          <div class="tool ck" @click="tmjxshow = true">
            <img src="@/images/ckjx.png" alt="" class="active" />
            <img src="@/images/ckjxac.png" alt="" class="normal" />
          </div>
          <div class="tool ck" @click="yzFn(item)" v-show="qdshow">
            <img src="@/images/qd.png" alt="" class="active" />
            <img src="@/images/qdac.png" alt="" class="normal" />
          </div>
          <div
            class="tool ck"
            @click="nextx()"
            v-show="item.id == qustion.length && !qdshow"
          >
            <img src="@/images/jx.png" alt="" class="active" />
            <img src="@/images/jx.png" alt="" class="normal" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'XquesTions',
  props: {
    qustion: []
  },
  data() {
    return {
      elcheckjy: false,
      checkList: [],
      step: 1,
      tmjxshow: false,
      right: false,
      erro: false,
      answer: '',
      qustions: [
        {
          id: 15, //题目id
          name: '单选题', //题目类型
          question: '以下哪一个问题对于寄生虫病的诊断比较有价值？', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.您近期或者之前去过什么地方?' // 题目选项
            }
          ],
          answer: ['A'], //正确答案
          des: '' //答案解析表述
        }
      ],
      lxname: '',
      lxnameimg: null,
      lximgbs: '',
      qdshow: true
    }
  },

  mounted() {},
  methods: {
    // 判断点的那一个线
    lxtfn(i, id) {
      this.lxname = i
      this.lximgbs = id
      // let flag = this.rightImages.some((item) => {})
      this.rightImages.forEach((item) => {
        if (item.img == this.leftImages[id].img) {
          this.lxname = ''
          this.lximgbs = ''
          console.log('存在重复线')
          return
        }
      })
    },
    // 验证连线题
    lxtfnyz(i, id) {
      console.log('点击的连接线', this.lximgbs, this.lxname, id)
      // console.log('点击的空白', this.rightImages[id])
      if (this.lxname != '') {
        if (this.lxname == i) {
          console.log('连接正确')
          this.rightImages[id].img = this.leftImages[this.lximgbs].img
          this.lxname = ''
          this.lximgbs = ''
        } else {
          this.rightImages[id].img = this.leftImages[this.lximgbs].img
          this.lxname = ''
          this.lximgbs = ''
          console.log('链接错误')
        }
      }
    },

    //控制可以选几个
    statusChange(item) {
      if (item.name == '单选题' || item.name == '判断题') {
        if (this.checkList.length > 1) {
          this.checkList.splice(0, 1)
        }
      }
    },
    //验证答案
    yzFn(item) {
      if (this.qustion.length == item.id) {
        this.qdshow = false
        console.log(this.qdshow)
      }
      if (this.checkList.length != 0 && this.tmjxshow == false) {
        //
        this.elcheckjy = true
        this.right = false
        this.erro = false
        this.audioUrl = ''
        this.answer = ''
        if (item.name == '单选题' || item.name == '判断题') {
          this.checkList.forEach((items) => {
            item.answer.find((itemx) => {
              if (itemx == items) {
                //单选题正确
                this.right = true
                this.erro = false
                this.answer = itemx
                return
              } else {
                this.right = false
                this.erro = true
                this.answer = itemx
                //单选题正确 错误
                return
              }
            })
          })
        }
        if (item.name == '多选题') {
          if (this.checkList == null || this.checkList == '') {
            this.right = false
            this.answer = this.answer + item.answer
            this.erro = true
          }
          if (this.checkList.length < item.answer.length) {
            this.right = false
            this.answer = this.answer + item.answer
            this.erro = true
          } else {
            const isCorrect = this.checkList.every((answer) =>
              item.answer.includes(answer)
            )

            if (isCorrect) {
              //多选题回答正确
              this.right = true
              this.erro = false
              this.answer = this.answer + item.answer
            } else {
              //多选题回答错误
              this.right = false
              this.answer = this.answer + item.answer
              this.erro = true
            }
          }
        }
      } else {
        //长度==0 没选择直接全错
        if (item.name == '连线题') {
          this.zqdan.forEach((item) => {
            this.rightImages.forEach((items) => {
              if (item.name != items.name) {
                this.right = false
                this.erro = true
                // this.answer = 'itemx'
              } else {
                this.right = true
                this.erro = false
                // this.answer = 'itemx'
              }
            })
          })
        }
      }
    },
    // 切换上下题目
    preornex(i) {
      // if (this.question.length == this.step) {
      //   this.qdshow = false
      // }
      if (this.tmjxshow == false) {
        this.qdshow = true
        this.right = false
        this.erro = false
        this.elcheckjy = false
        this.checkList = []
        if (i == 1 && this.step >= 1) {
          this.step = this.step - 1
          // console.log(this.qustion.length)
        } else if (i == 2 && this.step <= this.qustion.length) {
          this.step = this.step + 1
        }
      }
    },
    // 继续
    nextx() {
      this.$emit('tmwc')
    }
  }
}
</script>
<style>
.el-checkbox__inner {
  display: none !important;
}
.el-checkbox__input {
  display: none !important;
}
.el-checkbox__label {
  height: 78px !important;
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  background-color: #bdd1dd;
  color: #197aa9;
  border-radius: 5px;
  height: 78px;
}
.el-checkbox:last-of-type {
  margin-right: 30px !important;
}
.el-checkbox {
  display: flex;
  flex-direction: column;
  color: black;
}
</style>
